import React, { useEffect, useState } from 'react'
import { useRepoStore } from '@/store/useRepoStore'
import FileExplorer from './FileExplorer'
import FileViewer from './FileViewer'
import BranchSelector from './BranchSelector'

interface RepositoryDetailProps {
  owner: string
  repo: string
}

const RepositoryDetail: React.FC<RepositoryDetailProps> = ({ owner, repo }) => {
  const {
    currentRepo,
    fetchRepository,
    fetchBranches,
    branches,
    currentBranch,
    setCurrentBranch,
    isLoading,
    error,
  } = useRepoStore()

  const [activeTab, setActiveTab] = useState<'code' | 'commits'>('code')

  useEffect(() => {
    // 直接使用传入的 owner 和 repo 参数
    fetchRepository(owner, repo)
    fetchBranches(owner, repo)
  }, [owner, repo, fetchRepository, fetchBranches])

  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-green-500"></div>
      </div>
    )
  }

  if (error) {
    return (
      <div
        className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
        role="alert">
        <strong className="font-bold">错误：</strong>
        <span className="block sm:inline">{error}</span>
      </div>
    )
  }

  if (!currentRepo) {
    return (
      <div className="text-center py-10">
        <h3 className="text-lg font-medium text-gray-900 dark:text-white">
          仓库不存在
        </h3>
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
          找不到该仓库或您没有权限访问。
        </p>
      </div>
    )
  }

  const handleBranchChange = (branch: string) => {
    setCurrentBranch(branch)
  }

  return (
    <div className="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
      <div className="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
        <div className="flex justify-between items-center">
          <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
            {currentRepo.name}
          </h3>
          <div className="flex items-center space-x-2">
            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
              {currentRepo.private ? '私有' : '公开'}
            </span>
            <span className="inline-flex items-center text-sm">
              <svg
                className="h-4 w-4 text-yellow-400"
                fill="currentColor"
                viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <span className="ml-1 text-gray-500 dark:text-gray-400">
                {currentRepo.stargazersCount}
              </span>
            </span>
          </div>
        </div>
        <p className="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-400">
          {currentRepo.description || '暂无描述'}
        </p>
      </div>

      <div className="border-b border-gray-200 dark:border-gray-700">
        <div className="flex justify-between items-center px-4 py-3 sm:px-6">
          <nav className="-mb-px flex space-x-8">
            <button
              className={`${
                activeTab === 'code'
                  ? 'border-green-500 text-green-600 dark:text-green-400'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
              } whitespace-nowrap pb-3 px-1 border-b-2 font-medium text-sm`}
              onClick={() => setActiveTab('code')}>
              代码
            </button>
            <button
              className={`${
                activeTab === 'commits'
                  ? 'border-green-500 text-green-600 dark:text-green-400'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
              } whitespace-nowrap pb-3 px-1 border-b-2 font-medium text-sm`}
              onClick={() => setActiveTab('commits')}>
              提交历史
            </button>
          </nav>
          <BranchSelector
            branches={branches}
            currentBranch={currentBranch}
            onBranchChange={handleBranchChange}
          />
        </div>
      </div>

      <div className="px-4 py-5 sm:p-6">
        {activeTab === 'code' && (
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="md:col-span-1 border-r border-gray-200 dark:border-gray-700 pr-4">
              <FileExplorer owner={owner} repo={repo} />
            </div>
            <div className="md:col-span-3">
              <FileViewer />
            </div>
          </div>
        )}
        {activeTab === 'commits' && (
          <div className="text-center py-10">
            <h3 className="text-lg font-medium text-gray-900 dark:text-white">
              提交历史功能开发中
            </h3>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
              该功能正在开发中，敬请期待。
            </p>
          </div>
        )}
      </div>
    </div>
  )
}

export default RepositoryDetail
